{block name="style"}
<style xmlns="http://www.w3.org/1999/html">
    .keys-container .input-group-addon {
        top: 0;
        right: 0;
        color: #eee;
        width: 25px;
        padding: 7px;
        position: absolute;
        margin-top: -1px;
        text-align: center;
        background: #393D49
    }

    .keys-container [data-tips-image] {
        width: 112px;
        height: auto
    }

    .keys-container .layui-card {
        width: 580px;
        height: 578px;
        position: absolute;
        border: 1px solid #ccc
    }
</style>
{/block}

<form action="{:request()->url()}" data-auto="true" method="post" class='layui-form layui-card table-block'
      autocomplete="off">

    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">首页展示海报</label>
            <div class="layui-input-block">
                <input name="cover" type="hidden" value="{$vo.cover|default=''}">
                <script>$('[name="cover"]').uploadOneImage();</script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详情轮播海报</label>
            <div class="layui-input-block">
                <input name="slider" type="hidden" value="{$vo.slider|default=''}">
                <script>$('[name="slider"]').uploadMultipleImage();</script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block">
                <input name="act_name" value='{$vo.act_name|default=""}' required placeholder="请输入活动名称"
                       class="layui-input">
                <p class="help-block">必填，请输入活动名称</p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择背景音乐</label>
            <div class="layui-input-block">
                {foreach :config('pt.music_list') as $k=>$v}
                {if (!isset($vo.music_key) and $k eq 0) or (isset($vo.music_key) and $vo.music_key eq $k)}
                <input type="radio" data-pem-type="{$k}" name="music_key" value="{$k}" title="{$v.name}"
                       data-music="{$v.url}" checked>
                {else}
                <input type="radio" data-pem-type="{$k}" name="music_key" value="{$k}" title="{$v.name}"
                       data-music="{$v.url}">
                {/if}
                {/foreach}
            </div>
            <audio id="audio" src=""></audio>
            <div class="layui-input-block" style="margin-top: 10px;">
                <button type="button" onclick="play_music('play')" class="layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe652;</i> 试 听
                </button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" onclick="play_music('pause')" class="layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe651;</i> 停 止
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动开始时间</label>
            <div class="layui-input-block">
                <input id="act_start_time" name="act_start_time" value="{$vo.act_start_time|default=''}"
                       placeholder="请选择活动开始时间" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动结束时间</label>
            <div class="layui-input-block">
                <input id="act_end_time" name="act_end_time" value="{$vo.act_end_time|default=''}"
                       placeholder="请选择活动结束时间" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择科目</label>
            <div class="layui-input-block">
                {foreach $vo['menu_list'] as $k=>$v}
                <div style="font-size: 12px;line-height: 26px;color: #666;">{$v.title}</div>
                {foreach $v.sub as $v1}
                {if isset($vo.menu_keys) and in_array($v1.id,$vo.menu_keys)}
                <input type="checkbox" name="menu_keys[]" value="{$v1.id}" title="{$v1.title}" lay-skin="primary"
                       checked>
                {else}
                <input type="checkbox" name="menu_keys[]" value="{$v1.id}" title="{$v1.title}" lay-skin="primary">
                {/if}
                {/foreach}
                <br/>
                {/foreach}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格设置</label>
            <div class="layui-input-block">
                <!--多属性-->
                <button type="button" class='layui-btn layui-btn-sm layui-btn-primary' style="margin: 10px 0 0 10px;"
                        onclick="addAttr()">
                    添加价格
                </button>
                <table class="layui-table" id="demo" lay-filter="test"></table>
                <!--多属性-->
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">限制科目数量</label>
            <div class="layui-input-block">
                <input name="limit_num" value='{$vo.limit_num|default="0"}' required placeholder="请输入限制科目数量"
                       class="layui-input">
                <p class="help-block">必填，请输入限制科目数量</p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">预报名费用</label>
            <div class="layui-input-block">
                <input name="group_price" value='{$vo.group_price|default="0"}' required placeholder="请输入预报名费用"
                       class="layui-input">
                <p class="help-block">必填，请输入预报名费用</p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动简介</label>
            <div class="layui-input-block">
                <input name="intro" value='{$vo.intro|default=""}' required placeholder="请输入活动简介" class="layui-input">
                <p class="help-block">必填，请输入活动简介</p>
            </div>
        </div>

        <input type="hidden" name="price_list" id="price_list" value="{$vo.price_list}">

        <div class="layui-form-item label-required-prev">
            <label class="layui-form-label">活动详情</label>
            <div class="layui-input-block">
                <textarea name='content' required>{$vo.content|default=''}</textarea>
            </div>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type="submit">保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>

</form>

{block name='script'}
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    function play_music(type) {
        var a = document.getElementById("audio");
        var music_url = $("input[name='music_key']:checked").attr('data-music');
        console.log('music_url', music_url);
        if (type === 'play' && music_url !== '') {
            $("#audio").attr('src', music_url);
            a.play();
        } else {
            a.pause();
        }
    }

    laydate.render({
        elem: '#act_start_time'
        , type: 'datetime'
    });

    laydate.render({
        elem: '#act_end_time'
        , type: 'datetime'
    });

    layui.form.render();
    var oEditor;
    require(['ckeditor', 'angular'], function () {
        oEditor = window.createEditor('[name="content"]', {height: 280});
    });

    var table_cols = [[ //标题栏
        {field: 'group_num', title: '参团人数', minWidth: 30, edit: 'text'},
        {field: 'group_price', title: '参团价格', minWidth: 60, edit: 'text'},
        {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}
    ]];
    var table_data = JSON.parse('{$vo.price_list|raw}');
    var table;
    layui.use('table', function () {
        table = layui.table;
        //展示已知数据
        table.render({
            elem: '#demo',
            cols: table_cols,
            data: table_data
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var rowIndex = $(obj.tr).attr("data-index");
            table_data[rowIndex][obj.field] = obj.value;
            $('#price_list').val(JSON.stringify(table_data));
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            if (obj.event === 'del') {
                layer.confirm('确定删除么', function (index) {
                    var rowIndex = $(obj.tr).attr("data-index");
                    table_data.splice(rowIndex, 1);
                    obj.del();
                    $('#price_list').val(JSON.stringify(table_data));
                    console.log('delAttr', table_data);
                    layer.close(index);
                });
            }
        });
    });

    function addAttr() {
        console.log(table_data);
        table_data.push({
            group_num: 0,
            group_price: 0
        });
        $('#price_list').val(JSON.stringify(table_data));
        console.log(table_data);

        table.render({
            elem: '#demo',
            cols: table_cols,
            data: table_data
        });
    }

</script>
{/block}
